<template>
  <div class="box">
    <header class="header">
      <div class="w">
        <p><van-icon name="arrow-left" size="20" @click="$router.go(-1)" /></p>
        <p>分类</p>
        <p><van-icon name="shopping-cart-o" /></p>
      </div>
      <van-search v-model="value" placeholder="搜索商品" />
       <van-grid>
        <van-grid-item :icon="require('@/img/2.png')" text="电器2" />
        <van-grid-item :icon="require('@/img/3.png')" text="书法2" />
        <van-grid-item :icon="require('@/img/4.png')" text="水果2" />
        <van-grid-item :icon="require('@/img/5.png')" text="糖果2" />
      </van-grid>
    </header>
    <main class="content">
     
  <div class="sidebar">
                <van-sidebar class="left" v-model="active" @change="onChange">
                    <van-sidebar-item title="爆品推荐" />
                    <van-sidebar-item title="新品" />
                    <van-sidebar-item title="本地蔬菜" />
                    <van-sidebar-item title="豆制品" />
                    <van-sidebar-item title="叶菜类" />
                </van-sidebar>
                <ul class="right">
                    <div class="list">
                        <li v-for="item in list" :key="item.id">
                            <img :src="item.image" alt="">
                            <p>{{ item.title }}</p>
                        </li>
                    </div>
                </ul>
            </div>
    </main>
  </div>
</template>


<script setup>
import { ref, onMounted } from 'vue';
import request from '@/utils/request'
const active = ref(0);
const list = ref([])
const onChange = (index) => {
    const arr = ["爆品推荐","新品","本地蔬菜","豆制品","叶菜类"]
    request.get('/kind', {
        params: {
            key: arr[index]
        }
    }).then(res => {
        if (res.data.code == 200) {
            list.value = res.data.data
        }
    })
}
onMounted(() => {
    onChange(0)
})
</script>



<style lang="scss" >
.w {
  display: flex;
  justify-content: space-between;
}

.sidebar{
  display: flex;
  .left{
    width: 90px;
    position: fixed;
  }
  .right{
    margin-left: 90px;
    .list{
        display: flex;
        flex-wrap: wrap;
     li{
        width: 30%;
        margin: 1.5%;
        img{
            width: 100%;
        }
     }
    }
  }
}
</style>